<!--
 * @Author: 王鹏 2911783749@qq.com
 * @Date: 2022-10-23 18:32:23
 * @LastEditors: 王鹏 2911783749@qq.com
 * @LastEditTime: 2022-10-29 00:08:37
 * @FilePath: \v_shop\code\src\views\GoodsDialog.vue
 * @Description: 商品列表弹窗组件
-->
<template>
  <div>
    <el-dialog :title="dialog.title" :visible.sync="dialog.show">
      <el-form :model="goodsForm" :rules="goodsFormRules" ref="goodsFormRef">
        <el-form-item
          label="商品名称"
          :label-width="formLabelWidth"
          prop="goods_name"
        >
          <el-input
            v-model="goodsForm.goods_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="商品价格"
          :label-width="formLabelWidth"
          prop="goods_price"
        >
          <el-input
            v-model="goodsForm.goods_price"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="商品数量"
          :label-width="formLabelWidth"
          prop="goods_number"
        >
          <el-input
            v-model="goodsForm.goods_number"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="商品重量"
          :label-width="formLabelWidth"
          prop="goods_weight"
        >
          <el-input
            v-model="goodsForm.goods_weight"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品图片" :label-width="formLabelWidth">
          <!-- 
            action:图片上传接口地址
            on-preview：预览图片的钩子
            on-remove：移除图片时触发的钩子
            file-list：上传时的图片列表
            list-type：排版方式
            on_success:上传成功时的钩子
           -->
          <el-upload
            class="upload-demo"
            :action="imgUrl"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture"
            :headers="headersObj"
            :on-success="handleSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.show = false">取 消</el-button>
        <el-button type="primary" @click="submit('goodsFormRef')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { add_goods, edit_goods } from "../http/api";
export default {
  name: "GoodsDialog",
  props: {
    dialog: {
      type: Object,
    },
    goodsForm: {
      type: Object,
    },
  },
  data() {
    return {
      formLabelWidth: "80px",
      goodsFormRules: {
        goods_name: [
          { required: true, message: "商品名称不能为空", trigger: "blur" },
        ],
        goods_price: [
          { required: true, message: "商品价格不能为空", trigger: "blur" },
        ],
        goods_number: [
          { required: true, message: "商品数量不能为空", trigger: "blur" },
        ],
        goods_weight: [
          { required: true, message: "商品重量不能为空", trigger: "blur" },
        ],
      },
      fileList: [],
      imgUrl:'http://heima.9yuecloud.com:9988/api/private/v1/upload',
      headersObj:{
        Authorization:sessionStorage.getItem('token')
      }
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    // 移除图片的钩子
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 预览图片的钩子
    handlePreview(file) {
      console.log(file);
      this.imgUrl=file.url
    },
    handleSuccess(){},
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.dialog.option == "add") {
            add_goods(this.goodsForm).then((res) => {
              console.log(res);
              this.$message.success(res.data.meta.msg);
              this.dialog.show = false;
              this.$emit("update");
            });
          } else if (this.dialog.option == "edit") {
            edit_goods(this.goodsForm).then((res) => {
              console.log(res);
              this.$message.success(res.data.meta.msg);
              this.dialog.show = false;
              this.$emit("update");
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        }
      });
    },
  },
  watch: {},
  mixins: [],
};
</script>
<style  scoped>
</style>